<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假系统</title>
    <link rel="stylesheet" href="all.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }


        #main {
            width: 100%;
            /* height: 1449px; */
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }

        a {
            text-decoration: none;
            outline: none;
            color: #000;
        }

        body {
            overflow-x: hidden;
            position: absolute;
            width: 100%;
            height: 1449px;
            /* background-image: url(https://220678.oss-cn-qingdao.aliyuncs.com/955cc96107eb613.jpg); */
        }

        .top {
            width: 100%;
            height: 70px;
            background: #FFFFFF72;
            position: fixed;
        }

        .logo {
            display: inline-block;
        }

        .logo img {
            display: inline-block;
            /* float: left; */
            width: 80px;
            height: 80px;
            margin-left: 330px;
            margin-top: 0px;
        }

        .qingjia {
            /* float: left; */
            display: inline-block;
            width: 50px;
            height: 19px;
            line-height: 19px;
            position: absolute;
            font-size: 22px;
            /* color: white; */
            font-weight: 550;
            margin-left: 587px;
            margin-top: 25px;
        }

        .tiaozheng {
            /* float: left; */
            display: inline-block;
            width: 70px;
            height: 19px;
            line-height: 19px;
            position: absolute;
            /* color: white; */
            font-size: 22px;
            font-weight: 550;
            margin-left: 894px;
            margin-top: 25px;
        }

        .click {
            border-bottom: 5px #649ad8 solid;
        }

        /* .tiaozheng:hover {
    border-bottom: 5px #649ad8 solid;
} */

        .img {
            width: 100%;
            height: 570px;
            /* background-image: url(https://220678.oss-cn-qingdao.aliyuncs.com/下载.jpg); */
            background-repeat: no-repeat;
            /*position: relative;*/
        }

        .img img {
            width: 100%;
            height: 570px;
        }

        .table {
            width: 100%;
            height: 819px;
            background-color: white;
            /* background-image: url(https://s1.ax1x.com/2023/02/07/pSg8zHH.jpg); */
            /* background-image: url(https://220678.oss-cn-qingdao.aliyuncs.com/2.jpg); */
            /* background-repeat: no-repeat; */
            /* background-size: 100% 100%; */
            /*position: relative;*/
        }

        .php1,
        .php4 {
            float: left;
            /* display: inline-block; */
            width: 200px;
            height: 200px;
            border-radius: 20px;
            border: 1px solid #87BFE2;
        }

        .php1 img,
        .php4 img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }

        .php1 {
            margin-left: 50px;
            margin-top: 85px;
            transform: rotate(45deg);
            /* background-image: url(https://220678.oss-cn-qingdao.aliyuncs.com/462265801163669602.jpg); */
        }

        .php4 {
            margin-left: 1645px;
            margin-top: -200px;
            transform: rotate(45deg);
        }

        .table1,
        .table2 {
            float: left;
            width: 544px;
            height: 705px;
            /* border-radius: 30px; */
            border-radius: 20px;
            background: linear-gradient(180deg, #FBFBFB00 0%, #0080F4 100%);
            border: 1px solid #0476FB;
            /* background-color: white; */
            /* background: linear-gradient(180deg, #FFFFFF 0%, #84BEE2 100%); */
            /* background: -webkit-linear-gradient(top, rgba(44, 105, 177, .4)0%, rgba(0, 0, 0, 0.5)66%, rgba(0, 0, 0, 0)99%); */

        }

        .table1 {
            margin-left: 75px;
            margin-top: 72px;
        }

        .table2 {
            margin-left: 170px;
            margin-top: 72px;
        }

        span {
            display: block;
            font-size: 24px;
            font-weight: 500;
            padding-top: 25px;
            padding-left: 28px;
        }

        .time {
            font-size: 32px;
            font-weight: 500;
            padding-left: 32px;
        }

        .table1 input {
            /* -webkit-appearance: none; */
            margin-left: 117px;
            margin-top: 25px;
            border: 1px solid #676363;
            width: 310px;
            height: 44px;
            border-radius: 5px;
            font-size: 25px;
            letter-spacing: 3px;
        }

        #select {
            margin-left: 117px;
            margin-top: 25px;
            border: 1px solid #676363;
            width: 310px;
            height: 44px;
            border-radius: 5px;
            font-size: 21px;
            letter-spacing: 5px;
        }

        .span {
            display: block;
            font-size: 24px;
            font-weight: 500;
            /* padding-top: 30px; */
            padding-left: 28px;
        }

        textarea {
            margin-left: 96px;
            margin-top: 30px;
            width: 350px;
            height: 210px;
            border-radius: 8px;
            border: 2px solid #b3b3b3;
            font-size: 20px;
        }

        .tijiao,
        .tijiao2 {
            display: inline-block;
            width: 165px;
            height: 45px;
            margin-top: 40px;
            margin-left: 183px;
            background-color: white;
            border-radius: 5px;
            font-size: 24px;
            font-weight: 540;
            color: black;
            line-height: 40px;
            letter-spacing: 10px;
            text-align: center;
            border: none;
            padding-left: 6px;
        }

        .table2 span {
            display: block;
            position: absolute;
            /* margin-top: -5px; */
            font-size: 29px;
            font-weight: 500;
        }

        .jilu {
            width: 472px;
            height: 528px;
            /* background-color: white; */
            border-radius: 10px;
            margin-top: 90px;
            margin-left: 36px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .jiatiao {
            overflow-y: auto;
            float: left;
            width: 472px;
            height: 110px;
            background-color: white;
            border-radius: 10px;
            line-height: 26px;
            font-size: 18px;
            text-indent: 1em;
            font-weight: 400;
            margin-bottom: 25px;
            padding-top: 6px;
        }

        .table1 .table4 {
            width: 185px;
            margin-left: 55px;
            font-size: 20px;
            letter-spacing: 3px;
        }

        .table1 .table7 {
            width: 185px;
            margin-left: 55px;
            font-size: 20px;
            letter-spacing: 3px;
        }

        #select2,
        #select3 {
            margin-left: 45px;
            margin-top: 20px;
            border: 1px solid #676363;
            width: 185px;
            height: 46px;
            border-radius: 5px;
            font-size: 19px;
        }

        .bottom1 {
            float: left;
            background: #438BF6;
            width: 1025px;
            height: 60px;
        }

        .bottom2 {
            float: right;
            background: #438BF6;
            width: 889px;
            height: 60px;
        }

        .letter1 {
            display: inline-block;
            margin-right: 95px;
            margin-top: -5px;
            color: white;
            font-size: 22px;
        }

        .spe1 {
            display: inline-block;
            margin-left: 360px;
        }

        .letter2 {
            display: inline-block;
            margin-left: 140px;
            font-size: 22px;
            margin-top: -5px;
            color: white;
        }

        /*背景层*/
        #popLayer {
            height: 100%;
            display: none;
            background-color: #212020;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
            /* 只支持IE6、7、8、9 */
        }

        /* 弹出层 */
        #popBox {
            display: none;
            background-color: #d9d9d9;
            z-index: 11;
            width: 300px;
            height: 100px;
            border-radius: 10px;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }

        /* #popBox .close{
    text-align: right;
    margin-right: 5px; 
    background-color: #F8F8F8;
}  */

        /*关闭按钮*/
        /* #popBox .close a {
    text-decoration: none;
    color: #2D2C3B;
} */
        .content {
            font-size: 17px;
            padding-left: 36px;
            padding-top: 15px;
            line-height: 22px;
            font-weight: 500;
        }

        .close .button1 {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-left: 80px;
            margin-top: 5px;
            border-radius: 4px;
            border: white;
        }

        .close .button2 {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-left: 80px;
            margin-top: 4px;
            border-radius: 4px;
            border: white;
        }

        .jiatiao .p3 {
            line-height: 20px;
        }

        .jiatiao .p4 {
            text-align: end;
            margin-top: 0px;
            margin-right: 35px;
            font-size: 14px;
        }

        .jilu .jiatiao .p5 {
            text-align: end;
            margin-top: 0px;
            margin-right: 25px;
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="top">
            <div class="logo"><img src="https://220678.oss-cn-qingdao.aliyuncs.com/111.png"></div>
            <a href="qingjia.html" class="qingjia">请假</a>
            <a href="tiaozheng.html" class="tiaozheng">调研学</a>
        </div>
        <div class="img"><img src="https://s1.ax1x.com/2023/02/08/pS25aUe.jpg"></div>
        <div class="table">
            <div class="php1"><img src="https://s1.ax1x.com/2023/02/08/pS25rvt.jpg"></div>
            <div class="table1">
                <span class="time"></span>
                <span>请假时间：</span>
                <input type="date" class=" table6 date-picker" placeholder="  日期："><br>
                <!-- <input type="text" calss="table5" placeholder="  节数：" list="listItem"> -->
                <select id="select">
                    <option value="1">第一大节</option>
                    <option value="2">第二大节</option>
                    <option value="3">第三大节</option>
                    <option value="4">第四大节</option>
                    <option value="5">方向会议</option>
                </select> <br>
                <span class="span">请假理由：</span>
                <textarea></textarea>
                <button class="tijiao">确认提交</button>
                <div id="popLayer"></div>
                <div id="popBox">
                    <div class="content">

                    </div>
                    <div class="close">
                        <button class="button1" onclick="closeBox()">是</button><button class="button2"
                            onclick="closeBox()">否</button>
                    </div>

                </div>
            </div>
            <div class="table2">
                <span>本周请假记录：</span>
                <div class="jilu">
                    <!-- <div class="jiatiao">
                    <p class="p1">请假时间：</p>
                    <p class="p2">节数：</p>
                    <p calss="p3">请假理由：</p>
                    <div class="p4"></div>
                    </div> -->
                </div>
            </div>
            <div class="php4"><img src="https://s1.ax1x.com/2023/02/08/pS25yKP.jpg"></div>
        </div>
        <div class="bottom1">
            <span class="letter1 spe1">山西</span><span class="letter1">太原理工大学</span><span class="letter1">云顶书院</span>
        </div>
        <div class="bottom2">
            <span class="letter2">控索云里云外开源社区，一起畅游技术之海</span>
        </div>
        <script type="text/javascript" src="qingjia.js"></script>



    </div>
    <script>
        var time0 = document.querySelector('.time');
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        year = year < 10 ? '0' + year : year;
        month = month < 10 ? '0' + month : month;
        dates = dates < 10 ? '0' + dates : dates;
        time0.innerHTML = year + '-' + month + '-' + dates;

        //返回本周星期一到星期日的具体日期
        var nowTime = date.getTime();
        var day = date.getDay();
        var oneDayTime = 24 * 60 * 60 * 1000;
        //显示周一
        var MondayTime = nowTime - (day - 1) * oneDayTime;
        //显示周日
        var SundayTime = nowTime + (7 - day) * oneDayTime;
        //初始化日期时间
        var monday = new Date(MondayTime);
        var sunday = new Date(SundayTime);
        function add0(m) { return m < 10 ? '0' + m : m }
        function format(shijianchuo) {
            //shijianchuo是整数，否则要parseInt转换
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            //var h = time.getHours();
            //var mm = time.getMinutes();
            //var s = time.getSeconds();
            return y + '-' + add0(m) + '-' + add0(d);
        }
        // console.log(format(monday));
        // console.log(format(sunday));
        var first = format(monday);
        var two = format(sunday);
        // console.log(first);
        // console.log(two);

        //切换日历框的样式
        var defaultDate = document.querySelectorAll('.date-picker');
        for (var i = 0; i < defaultDate.length; i++) {
            defaultDate[i].valueAsDate = new Date();
        }

        // axios.default.baseURL = 'http://m7u12i6p.shenzhuo.vip:47038/';
        axios({
            url: 'http://m7u12i6p.shenzhuo.vip:47038/leave/show/',
            method: 'GET',
            contentType: "application/json",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            params: {
                s_date: `${first}`,
                e_date: `${two}`,
            }
        }).then(function (data) {
            // console.log(data.data);
            x = data.data.counts;
            // console.log(x);
            var obj = data.data.data;
            // console.log(obj);
            // console.log(data.counts);
            // })
            for (var j = 0; j < obj.length; j++) {
                // one += data[j];
                // console.log(obj[0]);
                var ini_day = obj[j].ini_day;
                var day = obj[j].day;
                var number = obj[j].time;
                var reason = obj[j].reason;
                // var indexs = selects.selectedIndex;
                // var num = selects.options[indexs].innerHTML;
                var div = document.createElement('div');
                jilu.insertBefore(div, jilu.children[0]);
                div.className = 'jiatiao';
                div.innerHTML = '<p class="p1">请假时间：' + day + '</p><p class="p2">节数：' + number + '</p><p calss="p3">请假理由：' + reason + '</p><div class="p4">' + ini_day + '</div>';

            }
        })

        //为转换页面按钮添加绑定事件
        var qingjia = document.querySelector(".qingjia");
        var tiaozheng = document.querySelector('.tiaozheng');
        var click = document.querySelector('.click');
        qingjia.onclick = function () {
            this.style.borderBottom = '5px #649ad8 solid';
            tiaozheng.style.borderBottom = '';
        }
        tiaozheng.addEventListener('click', function () {
            this.style.borderBottom = '5px #649ad8 solid';
            qingjia.style.borderBottom = '';
        })

        //选中selecte框的选中值
        var selects = document.getElementById("select");
        onchange = function () {
            var indexs = selects.selectedIndex;  //选中项的索引
            // console.log(selects.options[indexs].value);
        }

        //添加假条
        var tijiao = document.querySelector('.tijiao');
        // var jiatiao = document.querySelector('.jiatiao');
        var jilu = document.querySelector('.jilu');
        var table6 = document.querySelector('.table6');
        var textarea = document.querySelector('textarea');


        var indexs = selects.selectedIndex;  //选中项的索引
        var num = selects.options[indexs].innerHTML;

        tijiao.onclick = function () {
            if (textarea.value == '') {
                alert('请先将假条填写完整!');
            }
            if (time0.innerHTML > table6.value) {
                alert('请假时间无效，请重新输入');
            }
            else {
                if (x >= 3 & table6.value != '' & textarea.value != '') {
                    var popBox = document.getElementById("popBox");
                    var content = document.querySelector('.content');
                    var popLayer = document.getElementById("popLayer");
                    popBox.style.display = "block";
                    popLayer.style.display = "block";
                    content.innerHTML = '提醒：本周请假次数已达' + x + '次，<br>是否继续提交！！<br>';
                    var button1 = document.querySelector('.button1');
                    var button2 = document.querySelector('.button2');
                    /*点击关闭按钮*/
                    // var close1 = false;
                    var close1 = button1.onclick = function closeBox1() {

                        //关闭提示窗口
                        var popBox = document.getElementById("popBox");
                        var popLayer = document.getElementById("popLayer");
                        popBox.style.display = "none";
                        popLayer.style.display = "none";
                        return true;
                    }
                    button2.onclick = function closeBox2() {
                        var popBox = document.getElementById("popBox");
                        var popLayer = document.getElementById("popLayer");
                        popBox.style.display = "none";
                        popLayer.style.display = "none";
                        return false;
                    }
                    if (close1) {
                        var indexs = selects.selectedIndex;
                        var num1 = selects.options[indexs].innerHTML;

                        //向后端传递数据
                        axios({
                            url: "http://m7u12i6p.shenzhuo.vip:47038/leave/create/",
                            method: "POST",
                            contentType: "application/json",
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            data: {
                                // id:`${1111}`,
                                ini_date: time0.innerHTML,
                                date: table6.value,
                                time: num1,
                                reason: textarea.value
                            }
                        }).then(function (result) {
                            // console.log(result.data.result);
                            if (result.data.result == 1) {
                                // var indexs2 = selects.selectedIndex;
                                // var num = selects.options[indexs].innerHTML;
                                var div = document.createElement('div');
                                jilu.insertBefore(div, jilu.children[0]);
                                div.className = 'jiatiao';
                                div.innerHTML = '<p class="p1">请假时间：' + table6.value + '</p><p class="p2">节数：' + num + '</p><p calss="p3">请假理由：' + textarea.value + '</p><div class="p4">' + time0.innerHTML + '</div>';
                                x++;
                            } else if (result.data.result == 0) {
                                alert('今天已提交过一次，暂时无法提交！');
                            }
                        })
                    }

                    var indexs = selects.selectedIndex;
                    var num = selects.options[indexs].innerHTML;

                }
                else if (x < 3 & table6.value != '' & textarea.value != '') {
                    axios({
                        url: "http://m7u12i6p.shenzhuo.vip:47038/leave/create/",
                        method: "POST",
                        contentType: "application/json",
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        // heads: {
                        //     "content-type": "application/x-www-form-urlencoded",
                        // },
                        data: {
                            //    id:,
                            ini_date: time0.innerHTML,
                            date: table6.value,
                            time: num,
                            reason: textarea.value
                        }
                    }).then(function (result) {
                        // console.log(result.data.result);
                        y = result.data.result;
                        // })
                        if (y == 1) {
                            var indexs = selects.selectedIndex;
                            var num = selects.options[indexs].innerHTML;
                            var div = document.createElement('div');
                            jilu.insertBefore(div, jilu.children[0]);
                            div.className = 'jiatiao';
                            div.innerHTML = '<p class="p1">请假时间：' + table6.value + '</p><p class="p2">节数：' + num + '</p><p calss="p3">请假理由：' + textarea.value + '</p><div class="p4">' + time.innerHTML + '</div>';
                            x++;
                        } else if (y == 0) {
                            alert('今天已提交过一次，暂时无法提交！');
                        }
                    })
                }
            }

        }
    </script>
</body>

</html>